<template>
  <u-checkbox-group
    v-model="checkCoupons"
    placement="column"
    shape="circle"
    size="20"
    active-color="#FF5533"
  >
    <view
      v-for="item in couponList"
      :key="item.couponCode"
      class="coupon_wrap"
    >
      <image :src="getCouponBgImg(item)" class="coupon_bg_img" />
      <view class="coupon_left">
        <text>￥</text>{{ item.couponValue }}
      </view>
      <view class="coupon_right">
        <view>
          <view :class="[getColorClass('coupon_label', item)]">{{ item.applCategoryIntroduce }}</view>
          <view :class="[getColorClass('coupon_date', item)]">{{ getCouponUseDate(item) }}</view>
          <view :class="[getColorClass('coupon_type', item)]">{{ item.applRange }}</view>
        </view>
        <u-checkbox
          shape="circle"
          :name="item.couponCode"
          :disabled="disableCoupon(item)"
          :custom-style="{ marginRight: '16rpx' }"
          @change="handleCheckCoupon(item.couponCode)"
        />
      </view>
    </view>
  </u-checkbox-group>
</template>
<script>
export default {
  props: {
    // 优惠券集合
    couponList: {
      type: Array,
      default: () => []
    },
    // 已选择的优惠券
    couponChoosen: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      checkCoupons: []
    }
  },
  watch: {
    // 已选择的优惠券
    couponChoosen: {
      handler(val) {
        this.checkCoupons = [val?.couponCode]
      },
      immediate: true
    }
  },
  methods: {
    // 选择优惠券
    handleCheckCoupon(couponCode) {
      const hasCode = this.checkCoupons.includes(couponCode)
      this.checkCoupons = hasCode ? [] : [couponCode] // 当前点击code如果已存在在集合中，则当前为取消勾选操作，反之则为勾选
      const couponInfo = this.couponList.find(item => item.couponCode == this.checkCoupons[0])
      this.$emit('update:coupon-choosen', couponInfo ?? {})
      this.$emit('check')
    },
    // 禁用优惠券
    disableCoupon(couponInfo) {
      const cannotUsed = couponInfo.couponUseStatus < 0
      return cannotUsed
    },
    // 获取文本颜色class
    getColorClass(className, couponInfo) {
      const cannotUsed = this.disableCoupon(couponInfo)
      if (cannotUsed) return `${className} disable_color`
      return className
    },
    // 获取优惠券背景图
    getCouponBgImg(couponInfo) {
      const activeImage = `${this.vuex_imgPath}/couponBg.png`
      const disableImage = `${this.vuex_imgPath}/couponNoBg.png`
      const cannotUsed = this.disableCoupon(couponInfo)
      return cannotUsed ? disableImage : activeImage
    },
    // 获取优惠券使用时限
    getCouponUseDate(couponInfo) {
      const { useBegtime, useEndtime } = couponInfo
      const startTime = useBegtime.split(' ')[0]
      const endTime = useEndtime.split(' ')[0]
      return `${startTime} - ${endTime}`
    }
  }
}
</script>
<style lang="scss" scoped>
.disable_color {
  color: #999999 !important;
}
.coupon_wrap {
  width: 684rpx;
  height: 144rpx;
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 24rpx;
  .coupon_bg_img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  .coupon_left {
    width: 280rpx;
    height: 144rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    color: #FFFFFF;
    font-size: 48rpx;
    font-weight: 700;
    z-index: 1;
    text {
      font-size: 24rpx;
      font-weight: 700;
      position: relative;
      top: 8rpx;
    }
  }
  .coupon_right {
    width: 100%;
    padding: 24rpx;
    padding-left: 48rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    z-index: 1;
    .coupon_label {
      color: #FF5533;
      font-size: 20rpx;
      font-weight: 700;
    }
    .coupon_date {
      color: #AAAAAA;
      font-size: 20rpx;
      font-weight: 400;
    }
    .coupon_type {
      color: #808080;
      font-size: 20rpx;
      font-weight: 400;
    }
  }
}
</style>
